<template>
  <div class="insert-tollgate-form">
    <el-form label-width="100px" ref="formRef" :model="submitForm" :rules="rules" status-icon show-message>
      <el-form-item label="关卡名称" prop="tollgateName" v-loading="showFormLoading" element-loading-text="加载关卡中...">
        <el-input v-model="submitForm.tollgateName" placeholder="请输入关卡名称" :maxlength="20" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="关卡类型" prop="tollgateType">
        <el-radio-group v-model="submitForm.tollgateType" size="default" :fill="sysConfig.DARK_COLOR">
          <el-radio-button :label="TollgateType.CHINESE">中文</el-radio-button>
          <el-radio-button :label="TollgateType.ENGLISH">英文</el-radio-button>
        </el-radio-group>
        <div class="margin-row-5"></div>
        <el-tooltip  placement="top" content="中、英文类型代表显示方式不同,并不受内容限制!" effect="dark">
          <el-icon><QuestionFilled /></el-icon>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="方案内容" prop="content">
        <el-tooltip
            effect="dark"
            content="关卡内容中添加回车"
            placement="top-start"
        >
          <el-button class="margin-col-5" size="small" :color="sysConfig.DARK_COLOR" dark :icon="Plus"
                     @click="handleClickEnter">回车 </el-button>
        </el-tooltip>

        <el-input :autosize="{ minRows: 2, maxRows:20 }"
                  type="textarea"
                  :maxlength="1000"
                  placeholder="请输入关卡内容"
                  show-word-limit
                  v-model="submitForm.content" resize="none"></el-input>
      </el-form-item>
      <el-form-item label="关卡图标">
        <el-dialog v-model="showIconBox">
          <icon-box height="60vh" @selectIcon="handleClickIconBox"></icon-box>
        </el-dialog>
        <div class="flex-col">
          <el-space >
            <el-button class="margin-col-10" size="small" :color="sysConfig.DARK_COLOR" dark :icon="Cloudy"
                       @click="showIconBox=true">点击选择
            </el-button>
            <el-button class="margin-col-10" size="small" :color="sysConfig.DARK_COLOR" dark :icon="Cloudy"
                       @click="submitForm.icon='User'">默认
            </el-button>
          </el-space>
          <icon-card :icon="submitForm.icon" ></icon-card>
        </div>
      </el-form-item>

      <el-form-item label="更多设置">
        <el-button class="margin-row-10" size="small" :color="sysConfig.DARK_COLOR" dark :icon="ArrowDownBold" @click="handleClickShowMore">
          {{ computeShowMoreText }}
        </el-button>
      </el-form-item>
      <el-form-item v-show="showMoreFormItem" label="通关时限">
        <el-input-number size="small" v-model="submitForm.maxPassTime" :min="0" />
        <el-text class="margin-row-5" size="small">秒</el-text>
      </el-form-item>
      <el-form-item v-show="showMoreFormItem" label="最多错误">
        <el-input-number size="small" v-model="submitForm.maxPassError" :min="0" :max="computedMaxErrorNum"/>
        <el-text  class="margin-row-5" size="small">个</el-text>
      </el-form-item>
      <el-form-item v-show="showMoreFormItem" label="最低分数">
        <el-input-number size="small" v-model="submitForm.passScore" :min="0" :max="100" />
        <el-text class="margin-row-5" size="small">分( 0 ~ 100 )</el-text>
      </el-form-item>
      <el-form-item v-show="showMoreFormItem" label="通关速度">
        <el-space direction="vertical" fill>
          <div>
            <span class="margin-row-5">最低速度</span>
            <el-input-number size="small" v-model="submitForm.minSpeed" :min="0" />
            <el-text class="margin-row-5" size="small"> 个/分钟 </el-text>
          </div>
          <div>
            <span class="margin-row-5">标准速度</span>
            <el-input-number size="small" v-model="submitForm.commonSpeed" :min="0" />
            <el-text  class="margin-row-5" size="small"> 个/分钟 </el-text>
          </div>
          <div>
            <span class="margin-row-5">最大速度</span>
            <el-input-number size="small" v-model="submitForm.maxSpeed" :min="0" />
            <el-text  class="margin-row-5" size="small"> 个/分钟 </el-text>
          </div>
        </el-space>

      </el-form-item>

      <el-form-item>
        <div class="flex-row-center width-100-percent">
          <el-button @click="handleFormSubmit"
                     :loading="showLoading"
                     :color="sysConfig.DARK_COLOR"
                     dark class="width-80-percent">提交
          </el-button>
        </div>

      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import {computed, defineEmits, ref, watch,defineProps} from "vue";
import { TollgateType} from "@/ts/scheme";
import {ArrowDownBold, Cloudy, Plus, QuestionFilled} from "@element-plus/icons";
import IconBox from "@/components/icon/IconBox.vue";
import IconCard from "@/components/icon/IconCard.vue";
import sysConfig from "@/config/index"
import {addTollgate, getTollgateById, updateTollgate} from "@/api/tollgate/TollgateApi";
import {ElMessage, FormInstance, FormRules} from "element-plus";

interface TollgateRuleForm{
  tollgateName: string,
  tollgateType: TollgateType,
  content:string
}
export interface InsertTollgateFormType {
  id:string

  schemeId:string

  chapterId:string

  tollgateName:string

  tollgateType:TollgateType

  content:string

  icon:string

  maxPassTime:number

  maxPassError:number
  passScore:number
  commonSpeed:number
  minSpeed:number
  maxSpeed:number

}
let props=defineProps<{
  schemeId:string,
  chapterId:string
  tollgateId:string
}>()
let emit = defineEmits<{
  // eslint-disable-next-line no-unused-vars
  (e: "submit", form: InsertTollgateFormType): void
}>()
let submitForm = ref<InsertTollgateFormType>({
  commonSpeed: 0,
  chapterId: "",
  schemeId: "",
  content: "",
  icon: "",
  id: "0",
  maxPassError: 0,
  maxPassTime: 0,
  maxSpeed: 0,
  minSpeed: 0,
  passScore: 0,
  tollgateName: "",
  tollgateType: TollgateType.CHINESE

})

const rules = ref<FormRules<TollgateRuleForm>>({
  tollgateName: [
    { required:true,message:"请输入关卡名称",trigger:'blur'},
    {min:1,max:20,message:"关卡名限制长度:1~20",trigger: 'blur'}
  ],
  tollgateType: [
    { required:true,message:"请选择关卡类型",trigger:'blur'},
  ],
  content: [
    { required:true,message:"请输入关卡内容",trigger:'blur'},
    {min:1,max:1000,message:"关卡内容限制长度:1~1000",trigger: 'blur'}
  ],
})
// 提交按钮loading
let showLoading=ref(false)
// 表单请求loading
let showFormLoading=ref(false)
let showIconBox = ref(false)
let showMoreFormItem = ref(false)
let formRef=ref<FormInstance>()

function handleClickIconBox(icon:string) {
  showIconBox.value=false
  submitForm.value.icon=icon
}

function handleClickShowMore() {
  showMoreFormItem.value = !showMoreFormItem.value
}
function getTollgate(){
  showFormLoading.value=true
  getTollgateById(props.tollgateId).then(resp=>{
    if(resp.code === 200){
      submitForm.value=resp.data

    }
    showFormLoading.value=false
  })
}
function insert(){
  showLoading.value=true
  addTollgate({
    ...submitForm.value,
  }).then(resp=>{
    if(resp.code === 200){
      ElMessage({
        type:"success",
        message:"添加成功"
      })
      emit("submit", submitForm.value)
    }
    showLoading.value=false
  })
}
function update(){
  showLoading.value=true
  updateTollgate({
    ...submitForm.value,
  }).then(resp=>{
    if(resp.code === 200){
      ElMessage({
        type:"success",
        message:"修改成功"
      })
      emit("submit", submitForm.value)
      showLoading.value=false
    }
  })
}


function handleClickEnter(){
  submitForm.value.content+='\\n'
}
let computeShowMoreText = computed(() => {
  return showMoreFormItem.value ? '点击收起' : '点击展开'
})

let computedMaxErrorNum=computed(()=>{
  return submitForm.value.content?submitForm.value.content.length:0
})
function handleFormSubmit() {
  formRef.value?.validate((valid)=>{
    if(valid){
      if(props.tollgateId === "0"){

        insert()
      }else{

        update()
      }

    }
  })

}
watch(()=>props.tollgateId,(newV)=>{
  if(props.tollgateId !== "0"){

    // 修改，请求数据
    getTollgate()
  }

},{immediate:true})
watch(()=>props.schemeId,(newV)=>{
  if(props.tollgateId === "0"){
    // 修改
    submitForm.value.schemeId=newV
  }

},{immediate:true})
watch(()=>props.chapterId,(newV)=>{
  if(props.tollgateId === "0"){
    // 修改
    submitForm.value.chapterId=newV
  }

},{immediate:true})
</script>

<style scoped lang="less">
  .insert-tollgate-form{

  }
</style>